<script setup>
  // Promise + Async + Await
  // 从现在开始 认真学习 今天一直学 然后睡觉 明天早点起来

  // 需求：延迟2s输出1，完了之后延迟1s输出2，完了之后延迟1s输出3
  // -- 在JavaScript中，若是想要实现上述操作，需要使用 TimeOut函数，但是该函数是异步的
  // -- 也就是说，若是我使用同步代码的编写方式进行编写，将无法达到我们预设的目的
  // -- 先使用 ==> 实际输出231，因为异步函数会同时执行，2 3 只需要等待1s，因此先执行 
  // setTimeout(() => {
  //   console.log("1")
  // }, 2000)
  // setTimeout(() => {
  //   console.log("2")
  // }, 1000)
  // setTimeout(() => {
  //   console.log("3")
  // }, 1000)

  // 解决方式1：
  // 使用回调函数嵌套，在回调函数中进行嵌套，这样可以使其严格按照我们所设定的方式去执行
  // 缺点就是：当嵌套层数过高时，会导致代码的可读性下降
  // 实现方式：
  // setTimeout(() => {
  //   // 第一层
  //   console.log(1)
  //   setTimeout(() => {
  //     // 第二层
  //     console.log(2)
  //     setTimeout(() => {
  //       // 第三层
  //       console.log(3)
  //     }, 1000)
  //   }, 1000)
  // }, 2000)

  // 解决方式2：
  // 使用Promise消除回调地狱
  // -- 封装Promise方法
  // const print = (n, interval) => {
  //   // 返回Promise实例
  //   return new Promise((resolve) => {
  //     setTimeout(() => {
  //       // 将参数传递回去
  //       resolve(n)
  //     }, interval)
  //   })
  // }

  // -- 链式调用
  // -- 接收参数并打印，再返回一个promise实例，重复调用，如此循环形成链式调用
  // -- 确保只有一层回调嵌套
  // -- 但即使如此，当链式调用的层次多了后，还是会让代码的可读性降低
  // -- 此时我们需要思考，有没有办法，让异步代码写成同步代码的形式呢？答案是有的
  // print(1, 2000).then((n) => {
  //   console.log(n)
  //   return print(2, 1000)
  // }).then((n) => {
  //   console.log(n)
  //   return print(3, 1000)
  // }).then((n) => {
  //   console.log(n)
  // })

  // 解决方法3：
  // 使用Async + Await 结合 Promise对象消除回调地狱
  // -- 封装Promise对象方法
  // const func = (n , interval) => {
  //   // 返回Promise实例
  //   return new Promise((resolve) => {
  //     setTimeout(() => {
  //       resolve(n)
  //     }, interval)
  //   })
  // }

  // 封装执行的函数
  // 由async修饰的函数叫做异步函数，异步函数内部，使用await修饰的代码会同步进行执行
  // await 修饰promise对象时，可以直接获取到promise对象的返回值
  // const conbine = async () => {
  //   const n1 = await func(1, 2000)
  //   console.log(n1)
  //   const n2 = await func(2, 1000)
  //   console.log(n2)
  //   const n3 = await func(3, 1000)
  //   console.log(n3)
  // }

  // conbine()

  // 二，导入导出
  // -- 1，默认导出\导出
  // -- 成功导入，使用 export default即可完成默认导出
  // -- 后续使用 import 即可导入，我们无需限定模块名，但是建议与原名一致
  // -- 需要注意的是，一个模块仅允许默认导出一次
  // import print from "./test_1_14_1.js"
  // print()

  // -- 2，按需导入、导出
  // -- 成功导入并调用
  // -- 一个模块中可以有多个按需导出
  // -- 在按需导入时需要使用大括号指定导入的模块，模块名要一致
  import { sayHi } from './test_1_14_1';
  sayHi()

</script>

<template>
  <div>
    <!-- <span v-html="str"></span> -->
  </div>
</template>

<style scoped>

</style>